<template>
    <div>
        <span>全部{{all}}</span><span>未完成{{complete}}</span><span>已完成{{uncomplete}}</span>
    </div>
</template>

<script>
import { computed } from 'vue';

export default {
    props:["datalist"],
    setup (props) {
        const all=computed(()=>{
            return props.datalist.length; 
        });
        const complete=computed(()=>{
            return props.datalist.filter(t=>t.done).length;
        })
        const uncomplete=computed(()=>{
            return props.datalist.filter(t=>!t.done).length;
        })
        return {
            all,
            complete,
            uncomplete
        }
    }
}
</script>

<style lang="scss" scoped>

</style>